<template>
  <div class="mv-container">
<!--    mv详情-->
    <div class="mv-wrap">
      <h3 class="title">mv详情</h3>

      <!-- mv -->
      <div class="video-wrap">
        <video controls :src="url" autoplay></video>
      </div>

      <!-- mv信息 -->
      <div class="info-wrap">
        <div class="singer-info">
          <div class="avatar-wrap">
            <img src="../assets/touxiang.jpg" style="height: 80px;width: 80px" alt="">
          </div>
          <span class="name">{{ mvInfo.artistName }}</span>
        </div>
        <div class="mv-info">
          <h2 class="title">{{ mvInfo.name }}</h2>
          <span class="date">发布：{{ mvInfo.publishTime }}</span>
          <span class="number">播放：{{ mvInfo.playCount }} 次</span>
          <p class="desc">
            {{ mvInfo.desc }}
          </p>
        </div>
      </div>

      <!-- 精彩评论 -->
      <div class="comment-wrap" v-if="hotComments !== undefined && hotComments.length !== 0">
        <p class="title">
          精彩评论<span class="number">({{ hotComments.length }})</span>
        </p>
        <div class="comments-wrap">
          <!-- 评论 -->
          <div class="item" v-for="(item, index) in hotComments" :key="index">
            <div class="icon-wrap">
              <!-- 头像 -->
              <img :src="item.user.avatarUrl+'?param=50y50'" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">{{ item.user.nickname }}</span>
                <span class="comment">：{{ item.content }}</span>
              </div>

              <!-- 回复 -->
              <div class="re-content" v-if="item.beReplied.length !== 0">
                <span class="name">{{ item.beReplied[0].user.nickname }}</span>
                <span class="comment">：{{ item.beReplied[0].content }}</span>
              </div>
              <div class="date">{{ item.time | dateFormat }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 最新评论 -->
      <div class="comment-wrap">
        <p class="title">
          最新评论<span class="number">({{ total }})</span>
        </p>
        <div class="comments-wrap">
          <!-- 评论 -->
          <div class="item" v-for="(item, index) in comments" :key="index">
            <div class="icon-wrap">
              <!-- 头像 -->
              <img :src="item.user.avatarUrl+'?param=50y50'" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">{{ item.user.nickname }}</span>
                <span class="comment">：{{ item.content }}</span>
              </div>
              <!-- 回复 -->
              <div class="re-content" v-if="item.beReplied.length !== 0">
                <span class="name">{{ item.beReplied[0].user.nickname }}</span>
                <span class="comment">：{{ item.beReplied[0].content }}</span>
              </div>
              <div class="date">{{ item.time | dateFormat }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页器 -->
      <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total" :current-page="pageNum" :page-size="pageSize">
      </el-pagination>
    </div>

<!--    相关推荐-->
    <div class="mv-recommend">
      <h3 class="title">相关推荐</h3>
      <div class="mvs">
        <div class="items">
          <div class="item" v-for="(item, index) in simiMvs" :key="index" @click="playMv(item.id)">
            <div class="img-wrap">
              <img :src="item.cover+'?param=250y150'" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{ item.playCount | playNumFormat }}</div>
              </div>
              <span class="time">{{ item.duration | playTimeFormat }}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{ item.name }}</div>
              <div class="singer">{{ item.artistName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'mv',
  data () {
    return {
      id: '',
      // 总条数
      total: 20,
      // 页码
      pageNum: 1,
      // 页容量
      pageSize: 10,
      // mv地址
      url: '',
      // mv详情
      mvInfo: {},
      // 相似mv
      simiMvs: [],
      // 歌手图片
      icon: '',
      // 热门评论
      hotComments: [],
      // 最新评论
      comments: []
    }
  },
  created () {
    this.$pubSub.publish('pauseAudio')
    this.id = this.$route.query.id
    // 获取mv播放地址
    this._getMvUrl()
    // 获取相似mv
    this._getSimiMv()
    // 获取mv评论
    this._getMvComment()
    // 获取mv详情
    this._getMvDetail()
  },

  methods: {

    // 获取mv播放地址
    async _getMvUrl (id) {
      const {data: resp1} = await this.getMvUrl(this.id)
      this.url = resp1.data.url
    },
    getMvUrl (id) {
      return axios.post(`/mv/url/${id}`)
    },

    // 获取相似mv
    async _getSimiMv (id) {
      const {data: resp2} = await this.getSimiMv(this.id)
      this.simiMvs = resp2.mvs
    },
    getSimiMv (id) {
      return axios.post(`/simi/mv/${id}`)
    },

    // 获取mv评论
    async _getMvComment () {
      const {data: resp3} = await this.getMvComment(this.id, (this.pageNum - 1) * this.pageSize)
      this.comments = resp3.comments
      this.hotComments = resp3.hotComments
      this.total = resp3.total
    },
    getMvComment (id, offset) {
      return axios.post(`/comment/mv/${id}/${offset}`)
    },

    // 获取mv详情
    async _getMvDetail () {
      const {data: resp4} = await this.getMvDetail(this.id)
      this.mvInfo = resp4.data
      // console.log(`歌手id：${resp4.data.artistId}`)
    },
    getMvDetail (id) {
      return axios.post(`/mv/detail/${id}`)
    },
    // // 获取歌手图片
    // getArtistIcon (id) {
    //   return axios.post(`/artist/desc/${id}`)
    // },

    // 分页
    handleCurrentChange (val) {
      this.pageNum = val
      this._getMvComment()
    },

    // 播放相似mv，重新获取数据
    playMv (id) {
      this.pageNum = 1
      this.id = id
      this._getMvUrl()
      this._getSimiMv()
      this._getMvComment()
      this._getMvDetail()
    }
  }
}
</script>

<style>
</style>
